var doms = {
    letfDom: document.querySelector('.left-container'),
    letfDomLi: document.querySelector('.left-container li'),
    car: document.querySelector('.car-box'),
    ul: document.querySelector('.right-container')
}

var carRect = doms.car.getBoundingClientRect();
var endAnimation = {
    x: carRect.left + carRect.width / 2 - 15,
    y: carRect.top,
}

class leftContainer {
    // 切换分类
    switchType(index) {
        let activeDom = doms.letfDom.querySelector('.active');
        if (activeDom) {
            activeDom.classList.remove('active')
        }
        var li = doms.letfDom.children[index];
        li.classList.add('active');
    }

    // 曲线动画
    animation(index) {
        var rect = doms.ul.children[index].querySelector('.add').getBoundingClientRect();
        var startAnimation = {
            x: rect.left,
            y: rect.top
        }

        var div = document.createElement('div');
        div.className = 'add-animation';
        var div2 = document.createElement('div');
        div2.className = 'btn';
        div2.innerHTML = '+';
        div.appendChild(div2);

        div.style.transform = `translateX(${startAnimation.x}px)`;
        div2.style.transform = `translateY(${startAnimation.y}px)`;
        document.body.appendChild(div);
        div.clientWidth;
        div.style.transform = `translateX(${endAnimation.x}px)`;
        div2.style.transform = `translateY(${endAnimation.y}px)`;

        div.addEventListener('transitionend', function () {
            div.remove();
        }, {
            once: true
        })
    }

    // 购物车动画
    carAnimation() {
        doms.car.classList.add('animation');
        doms.car.addEventListener('animationend', function () {
            this.classList.remove('animation')
        })
    }
}

var base = new leftContainer;

doms.letfDom.addEventListener('click', function (e) {
    var index = e.target.getAttribute('index');
    base.switchType(index);
})

doms.ul.addEventListener('click', function (e) {
    if (e.target.classList.contains('add')) {
        console.log('加')
        var index = +e.target.getAttribute('index');
        base.animation(index);
        base.carAnimation();
    } else if (e.target.classList.contains('del')) {
        console.log('减')
    }
})
